<template>
    <div>
      <el-dialog v-model="model" :title="type=='ADD'?'添加标签':'编辑标签'" width="500" :close-on-click-modal="false">
        <el-form :model="form" label-width="110" :rules="rules" ref="formRef">
          <el-form-item label="话题名" prop="tag_name">
            <el-input v-model="form.topic_name" />
          </el-form-item>
          <el-form-item label="备注" prop="tag_describe">
            <el-input v-model="form.topic_describe" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="submitForm(formRef)">
              {{type=='ADD'?'添加':'修改'}}
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script lang="ts">
  import router from '@/router'
  import { moduleExpression } from '@babel/types'
  import { Plus } from '@element-plus/icons-vue'
  import user from '@/config/Enums/user'
  import Pinterface from '@/config/Interface/Public'
  import Interface from '@/config/Interface/User'
  import { defineComponent,ref,onMounted,reactive,toRefs} from 'vue'
  import { getCurrentInstance} from 'vue'
  import { useStore } from '../../store'
  import { ElMessage, FormInstance, FormRules } from 'element-plus'
  import { createTopicApi,updateTopicApi } from '@/request/topic'
  import type { UploadProps } from 'element-plus'
  export default defineComponent({
    name: 'addUser',
    components: {
  
    },
    setup(props,{ emit }){
      const store = useStore()
      const context = getCurrentInstance()?.appContext.config.globalProperties; //获取this
      const msg = reactive<any>({})
      const model =ref(false) // 模态框显示隐藏
      const type = ref('') //类型 添加/编辑
  
      const reactiveData = reactive({
        form:{
          topic_describe:'',
          topic_name:'',
        },
      })
  
      const trigger = (Type:string,scope?:any) =>{
        model.value = true
        type.value = Type
        if(scope) {
          msg.value = scope.row
          reactiveData.form.topic_describe = msg.value.topic_describe
          reactiveData.form.topic_name = msg.value.topic_name
        }
  
      }
  
      const rules = reactive({
        topic_name:[
          { required: true, message: '请输入话题名', trigger: 'blur' },
          { min: 4, max: 20, message: '标签名长度6-20', trigger: 'blur' },
        ],
      })
      // 关闭表单
      const close = () => {
        reactiveData.form.topic_name = '',
        reactiveData.form.topic_describe = '',
        model.value = false;
      }
      const formRef = ref<FormInstance>()
      // 提交表单
      const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) {
          return
        }else{
          await formEl.validate((valid, fields) => {
          console.log(valid);
          if (!valid) {
            return
          } else {
            postSend()
          }
        })
        }
      }
  
      const postSend = async () =>{
        const postData:any = {
          ...reactiveData.form,
        }
        if(type.value =='ADD'){
          postData.hot_count = 0
          const res = await createTopicApi(postData)
          if(res.data.code === 1){
            ElMessage({
              message:"创建成功",
              type:"success"
            })
            close()
            emit('RefreshListEmit')
          }
        }else{
          postData.id = msg.value.id
          const res = await updateTopicApi(postData)
          if(res.data.code === 1){
            ElMessage({
              message:"修改成功",
              type:"success"
            })
            close()
            emit('RefreshListEmit')
          }
        }
      }
  
      return {
        ...toRefs(reactiveData),
        model,type,
        trigger,
        rules,
        submitForm,
        close,formRef,
      }
    }
  })
  </script>
  
  <style scoped lang="stylus">

  </style>
  